<template>
  <div class="container">
    <h2 class="mb-4">订单管理系统</h2>

    <!-- 导航标签 -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" v-for="tab in tabs" :key="tab.id">
        <a class="nav-link" :class="{ active: activeTab === tab.id }" 
           @click="activeTab = tab.id" href="javascript:void(0)">
          {{ tab.name }}
        </a>
      </li>
    </ul>

    <!-- 标签内容 -->
    <div class="tab-content">
      <!-- 订单管理 -->
      <div v-show="activeTab === 'order'" class="tab-pane">
        <div class="card">
          <div class="card-header">
            <h5>订单基础信息</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>订单编号</label>
                  <input type="text" v-model="orderForm.orderNo" class="form-control" placeholder="请输入订单编号">
                </div>
                <div class="form-group">
                  <label>用户ID</label>
                  <input type="number" v-model="orderForm.userId" class="form-control" placeholder="请输入用户ID">
                </div>
                <div class="form-group">
                  <label>设备ID</label>
                  <input type="number" v-model="orderForm.deviceId" class="form-control" placeholder="请输入设备ID">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>订单金额</label>
                  <input type="number" v-model="orderForm.totalAmount" class="form-control" placeholder="请输入订单金额">
                </div>
                <div class="form-group">
                  <label>支付方式</label>
                  <select v-model="orderForm.payType" class="form-control">
                    <option v-for="type in payTypes" :key="type.value" :value="type.value">
                      {{ type.label }}
                    </option>
                  </select>
                </div>
                <div class="form-group">
                  <label>订单状态</label>
                  <select v-model="orderForm.status" class="form-control">
                    <option v-for="status in orderStatuses" :key="status.value" :value="status.value">
                      {{ status.label }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <button class="btn btn-primary" @click="getOrderDetail">
                <i class="fas fa-search"></i> 查询订单
              </button>
              <button class="btn btn-success" @click="createOrder">
                <i class="fas fa-plus"></i> 创建订单
              </button>
              <button class="btn btn-warning" @click="updateOrder">
                <i class="fas fa-edit"></i> 修改订单
              </button>
              <button class="btn btn-danger" @click="cancelOrder">
                <i class="fas fa-times"></i> 取消订单
              </button>
              <button class="btn btn-info" @click="listOrders">
                <i class="fas fa-list"></i> 查询全部
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付管理 -->
      <div v-show="activeTab === 'payment'" class="tab-pane">
        <div class="card">
          <div class="card-header">
            <h5>支付信息管理</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>支付金额</label>
                  <input type="number" v-model="paymentForm.amount" class="form-control" placeholder="请输入支付金额">
                </div>
                <div class="form-group">
                  <label>支付方式</label>
                  <select v-model="paymentForm.type" class="form-control">
                    <option v-for="type in payTypes" :key="type.value" :value="type.value">
                      {{ type.label }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <button class="btn btn-primary" @click="getOrderPayment">
                <i class="fas fa-search"></i> 查询支付
              </button>
              <button class="btn btn-success" @click="createPayment">
                <i class="fas fa-plus"></i> 创建支付
              </button>
              <button class="btn btn-info" @click="queryPaymentStatus">
                <i class="fas fa-sync"></i> 查询状态
              </button>
              <button class="btn btn-info" @click="listPayments">
                <i class="fas fa-list"></i> 查询全部
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 优惠券管理 -->
      <div v-show="activeTab === 'coupon'" class="tab-pane">
        <div class="card">
          <div class="card-header">
            <h5>优惠券管理</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>优惠券码</label>
                  <input type="text" v-model="couponForm.code" class="form-control" placeholder="请输入优惠券码">
                </div>
                <div class="form-group">
                  <label>优惠券类型</label>
                  <select v-model="couponForm.type" class="form-control">
                    <option v-for="type in couponTypes" :key="type.value" :value="type.value">
                      {{ type.label }}
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <button class="btn btn-primary" @click="getOrderCoupon">
                <i class="fas fa-search"></i> 查询优惠券
              </button>
              <button class="btn btn-success" @click="applyCoupon">
                <i class="fas fa-plus"></i> 使用优惠券
              </button>
              <button class="btn btn-warning" @click="removeCoupon">
                <i class="fas fa-minus"></i> 移除优惠券
              </button>
              <button class="btn btn-info" @click="listCoupons">
                <i class="fas fa-list"></i> 查询全部
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 评价管理 -->
      <div v-show="activeTab === 'review'" class="tab-pane">
        <div class="card">
          <div class="card-header">
            <h5>评价管理</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>评分</label>
                  <select v-model="reviewForm.rating" class="form-control">
                    <option v-for="rating in ratings" :key="rating.value" :value="rating.value">
                      {{ rating.label }}
                    </option>
                  </select>
                </div>
                <div class="form-group">
                  <label>评价内容</label>
                  <textarea v-model="reviewForm.content" class="form-control" rows="3" placeholder="请输入评价内容"></textarea>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <button class="btn btn-primary" @click="getOrderReview">
                <i class="fas fa-search"></i> 查询评价
              </button>
              <button class="btn btn-success" @click="submitReview">
                <i class="fas fa-plus"></i> 提交评价
              </button>
              <button class="btn btn-warning" @click="updateReview">
                <i class="fas fa-edit"></i> 修改评价
              </button>
              <button class="btn btn-info" @click="listReviews">
                <i class="fas fa-list"></i> 查询全部
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 退款管理 -->
      <div v-show="activeTab === 'refund'" class="tab-pane">
        <div class="card">
          <div class="card-header">
            <h5>退款管理</h5>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>退款金额</label>
                  <input type="number" v-model="refundForm.amount" class="form-control" placeholder="请输入退款金额">
                </div>
                <div class="form-group">
                  <label>退款类型</label>
                  <select v-model="refundForm.type" class="form-control">
                    <option v-for="type in refundTypes" :key="type.value" :value="type.value">
                      {{ type.label }}
                    </option>
                  </select>
                </div>
                <div class="form-group">
                  <label>退款原因</label>
                  <textarea v-model="refundForm.reason" class="form-control" rows="3" placeholder="请输入退款原因"></textarea>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <button class="btn btn-primary" @click="getOrderRefund">
                <i class="fas fa-search"></i> 查询退款
              </button>
              <button class="btn btn-success" @click="applyRefund">
                <i class="fas fa-plus"></i> 申请退款
              </button>
              <button class="btn btn-warning" @click="updateRefund">
                <i class="fas fa-edit"></i> 更新退款
              </button>
              <button class="btn btn-info" @click="listRefunds">
                <i class="fas fa-list"></i> 查询全部
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 响应结果 -->
    <div class="card">
      <div class="card-header">
        <h5>响应结果</h5>
      </div>
      <div class="card-body">
        <pre class="response-area">{{ response }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import orderApi from '../api/order.js'

export default {
  name: 'OrderManagement',
  setup() {
    // 状态定义
    const activeTab = ref('order')
    const response = ref('')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const tabs = [
      { id: 'order', name: '订单管理' },
      { id: 'payment', name: '支付管理' },
      { id: 'coupon', name: '优惠券管理' },
      { id: 'review', name: '评价管理' },
      { id: 'refund', name: '退款管理' }
    ]

    // 表单数据
    const orderForm = reactive({
      orderNo: '',
      userId: '',
      deviceId: '',
      totalAmount: '',
      payType: 1,
      status: 0
    })

    const paymentForm = reactive({
      amount: '',
      type: 1
    })

    const couponForm = reactive({
      code: '',
      type: 1
    })

    const reviewForm = reactive({
      rating: 5,
      content: ''
    })

    const refundForm = reactive({
      amount: '',
      type: 1,
      reason: ''
    })

    // 选项数据
    const payTypes = [
      { value: 1, label: '微信支付' },
      { value: 2, label: '支付宝' },
      { value: 3, label: '银联支付' }
    ]

    const orderStatuses = [
      { value: 0, label: '待支付' },
      { value: 1, label: '已支付' },
      { value: 2, label: '已完成' },
      { value: 3, label: '已取消' }
    ]

    const couponTypes = [
      { value: 1, label: '满减券' },
      { value: 2, label: '折扣券' },
      { value: 3, label: '无门槛券' }
    ]

    const ratings = [
      { value: 5, label: '5星' },
      { value: 4, label: '4星' },
      { value: 3, label: '3星' },
      { value: 2, label: '2星' },
      { value: 1, label: '1星' }
    ]

    const refundTypes = [
      { value: 1, label: '全额退款' },
      { value: 2, label: '部分退款' }
    ]

    // 方法定义
    const showResponse = (data) => {
      response.value = JSON.stringify(data, null, 2)
    }

    // 订单基础信息接口
    const getOrderDetail = async () => {
      try {
        const res = await orderApi.getOrderDetail(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const createOrder = async () => {
      try {
        const orderData = {
          userId: orderForm.userId,
          deviceId: orderForm.deviceId,
          totalAmount: orderForm.totalAmount,
          actualAmount: orderForm.totalAmount,
          discountAmount: 0,
          payType: orderForm.payType,
          status: 0
        }
        const res = await orderApi.createOrder(orderData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const updateOrder = async () => {
      try {
        const orderData = {
          orderNo: orderForm.orderNo,
          status: orderForm.status,
          remark: "更新订单信息"
        }
        const res = await orderApi.updateOrder(orderData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const cancelOrder = async () => {
      try {
        const cancelData = {
          orderNo: orderForm.orderNo,
          cancelReason: "用户取消订单"
        }
        const res = await orderApi.cancelOrder(cancelData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const listOrders = async () => {
      try {
        const res = await orderApi.listOrders(currentPage.value, pageSize.value)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单支付信息接口
    const getOrderPayment = async () => {
      try {
        const res = await orderApi.getOrderPayment(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const createPayment = async () => {
      try {
        const paymentData = {
          orderNo: orderForm.orderNo,
          paymentType: paymentForm.type,
          paymentAmount: paymentForm.amount
        }
        const res = await orderApi.createPayment(paymentData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const queryPaymentStatus = async () => {
      try {
        const res = await orderApi.queryPaymentStatus(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单优惠券信息接口
    const getOrderCoupon = async () => {
      try {
        const res = await orderApi.getOrderCoupon(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const applyCoupon = async () => {
      try {
        const couponData = {
          orderNo: orderForm.orderNo,
          couponCode: couponForm.code,
          couponType: couponForm.type
        }
        const res = await orderApi.applyCoupon(couponData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const removeCoupon = async () => {
      try {
        const res = await orderApi.removeCoupon(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单评价信息接口
    const getOrderReview = async () => {
      try {
        const res = await orderApi.getOrderReview(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const submitReview = async () => {
      try {
        const reviewData = {
          orderNo: orderForm.orderNo,
          rating: reviewForm.rating,
          content: reviewForm.content,
          images: ""
        }
        const res = await orderApi.submitReview(reviewData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const updateReview = async () => {
      try {
        const reviewData = {
          orderNo: orderForm.orderNo,
          rating: reviewForm.rating,
          content: reviewForm.content,
          images: ""
        }
        const res = await orderApi.updateReview(reviewData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单退款信息接口
    const getOrderRefund = async () => {
      try {
        const res = await orderApi.getOrderRefund(orderForm.orderNo)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const applyRefund = async () => {
      try {
        const refundData = {
          orderNo: orderForm.orderNo,
          refundAmount: refundForm.amount,
          refundType: refundForm.type,
          reason: refundForm.reason
        }
        const res = await orderApi.applyRefund(refundData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    const updateRefund = async () => {
      try {
        const refundData = {
          orderNo: orderForm.orderNo,
          status: 2,
          handleResult: "退款已处理"
        }
        const res = await orderApi.updateRefund(refundData)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单支付信息接口
    const listPayments = async () => {
      try {
        const res = await orderApi.listPayments(currentPage.value, pageSize.value)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单优惠券信息接口
    const listCoupons = async () => {
      try {
        const res = await orderApi.listCoupons(currentPage.value, pageSize.value)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单评价信息接口
    const listReviews = async () => {
      try {
        const res = await orderApi.listReviews(currentPage.value, pageSize.value)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    // 订单退款信息接口
    const listRefunds = async () => {
      try {
        const res = await orderApi.listRefunds(currentPage.value, pageSize.value)
        showResponse(res.data)
      } catch (error) {
        showResponse(error.response.data)
      }
    }

    return {
      activeTab,
      tabs,
      response,
      currentPage,
      pageSize,
      orderForm,
      paymentForm,
      couponForm,
      reviewForm,
      refundForm,
      payTypes,
      orderStatuses,
      couponTypes,
      ratings,
      refundTypes,
      getOrderDetail,
      createOrder,
      updateOrder,
      cancelOrder,
      listOrders,
      getOrderPayment,
      createPayment,
      queryPaymentStatus,
      listPayments,
      getOrderCoupon,
      applyCoupon,
      removeCoupon,
      listCoupons,
      getOrderReview,
      submitReview,
      updateReview,
      listReviews,
      getOrderRefund,
      applyRefund,
      updateRefund,
      listRefunds
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 30px;
}

.card {
  margin-bottom: 20px;
}

.response-area {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
}

.nav-tabs {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}
</style> 